<template>
    <div class="container">
        <div class="row1">
            <div>应付金额</div>
            <el-radio-group class="form-speItem" v-model="vipInfo.priceType">
                <el-radio value="1" v-if="isVipPay != '1'">￥{{ price }}</el-radio>
                <el-radio value="2" v-if="todo == 'orderChange' || todo == 'mountPay' "
                    :disabled="!vipInfo.hasVipPrice">权益价￥{{ vipPrice }}</el-radio>
            </el-radio-group>
        </div>
        <!-- 优惠项目 -->
        <el-table class="tableRef table1" ref="tableRef" :data="saleData" scrollbar-always-on>
            <el-table-column label="" width="35"></el-table-column>
            <el-table-column prop="yhxm" label="优惠项目" min-width="50%" show-overflow-tooltip></el-table-column>
            <el-table-column prop="je" label="金额" min-width="30%" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div v-if="scope.row.yhxm == '服务费' || scope.row.yhxm == '补低消'" class="color-0ACC6B">
                        +￥{{ scope.row.je }}
                    </div>
                    <div v-else class="color-FF3333">
                        -￥{{ scope.row.je }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" min-width="20%">
                <template #default="scope">
                    <el-button type="text" @click="handleDel(scope)">删除</el-button>
                    <!-- <img class="del-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/delete.png" alt=""
                        @click="handleDel(scope)"> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="surplus-box font-size-16 color-212121">
            <div>
                <div>应收金额：￥ {{ receive }}</div>
                <div style="margin-top: 15px;">已收金额：￥{{ received }}</div>
            </div>
            <div>
                <div class="font-size-24 color-FF3333 font-weight-bold">￥ {{ unpay }}</div>
                <div style="margin-top: 5px;">还需收款</div>
            </div>
        </div>
        <!-- 支付方式 -->
        <el-table class="tableRef table2" ref="tableRef" :data="payData" scrollbar-always-on>
            <el-table-column label="" width="35"></el-table-column>
            <el-table-column prop="zffs" label="支付方式" min-width="50%" show-overflow-tooltip></el-table-column>
            <el-table-column prop="skje" label="收款金额" min-width="30%" width="140" align="center" show-overflow-tooltip>
                <template #default="scope">
                    <div class="color-FF6A00">￥{{ scope.row.skje }}</div>
                </template>
            </el-table-column>
            <el-table-column label="" min-width="20%">
                <template #default="scope">
                    <el-button type="text" @click="handleReturn(scope)">退款</el-button>
                    <!-- <img class="del-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/return.png" alt=""
                        @click="handleReturn(scope)"> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import ls from '@/lib/ls'
import Api from '@/api'
import { getLocalIPv4 } from "@/utils/getip.js";

// 接收父组件参数 props
const props = defineProps({
    saleData: {
        type: Array,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
    receive: {
        type: String,
        required: false,
    },
    received: {
        type: String,
        required: false,
    },
    unpay: {
        type: String,
        required: false,
    },
    vipPrice: {
        type: String,
        required: false,
    },
    vipInfo: {
        type: Object,
        required: false,
    },
    isVipPay:{
        type: String,
        required: false,
    }
})

const unpay = toRef(props, 'unpay')
const saleData = toRef(props, 'saleData')
const payData = toRef(props, 'payData')
const vipPrice = toRef(props, 'vipPrice')
const vipInfo = toRef(props, 'vipInfo')
const price = toRef(props, 'price')


watch(() => vipInfo.value.priceType, (newvalue, oldvalue) => {
   
    console.log('监听 vipInfo.value.priceType :>> ', vipInfo.value.priceType);
    // vipInfo.value.priceType == '1' 就是不享受会员价   vipInfo.value.priceType == '2' 就是享受会员价
    if (vipInfo.value.priceType == '1') {
        saleData.value.forEach((item, $index) => {
            if (item.yhxm == '会员折扣优惠') {
                saleData.value.splice($index, 1)
            }
        });
    } else {
        if (Number(price.value) == Number(vipPrice.value)) return // 如果会员价等于原价 返回
        let flag = false // 开关 已有会员折扣优惠 就不要在生成新的会员折扣优惠
        saleData.value.forEach((item, $index) => {
            if (item.yhxm == '会员折扣优惠') {
                flag = true
            }
        });
        if (!flag) {
            const saleObj = {
                yhxm: '会员折扣优惠',
                je: Number(price.value) - Number(vipPrice.value),
                code: router.currentRoute.value.query.payBatchCode,
                amt: Number(price.value) - Number(vipPrice.value),
                type: '会员折扣优惠',
                subType: '',
            }
            saleData.value.push(saleObj)
            console.log(saleData.value)
        }
    }
})


const router = useRouter();
const todo = router.currentRoute.value.query.todo
// const cardNo = router.currentRoute.value.query.cardNo


// 删除优惠项目
const handleDel = (scope) => {
    const { row, $index } = scope;
    if (row.yhxm == '会员折扣优惠') return ElNotification({
        title: '提示',
        message: '会员折扣优惠无法删除',
        type: 'warning',
    })
    saleData.value.splice($index, 1);
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });
// 删除支付方式
const handleReturn = (scope) => {
    if (todo == 'orderChange') {
        return_orderChange(scope)
    }
    else if (todo == 'vipUpgrade') {
        return_vipUpgrade(scope)
    }
    else if (todo == 'mountPay') {
        return_mountPay(scope)
    }
}
// 换菜
const return_orderChange = (scope) => {
    const { row, $index } = scope;
    console.log('row :>> ', row);
    const data = {
        payType: row.payType,
        itemCode: row.itemCode,
        amt: row.payAmt,
        payBatchCode: row.payBatchCode,
        consumeCode: row.consumeCode,
        cardNo: row.cardNo,
        tradeNo: row.tradeNo,
        sourceType: '2',
    }
    Api.Common.PcObjProcess.Do({ "functionName": "OrderPayRet", "orgCode": "0004", "contentData": { ...data, "ip": ip.value } }).then(res => {
        console.log('点击撤销支付 res:>> ', res);
        ElNotification({
            title: '提示',
            message: '撤销成功',
            type: 'success',
        })
        payData.value.splice($index, 1);
        const ls_orderChange = ls.get('orderChange')
        if (ls_orderChange) {
            ls_orderChange.payData = payData.value
            ls.set('orderChange', ls_orderChange)
        }
    })
}

// 会员升级
const return_vipUpgrade = (scope) => {
    const { row, $index } = scope;
    console.log('row :>> ', row);
    let data = {
        itemCodes: row.itemCode,
    }
    // console.log('会员升级 data :>> ', data);
    Api.Common.PcObjProcess.Do({ "functionName": "MemberUpPayRet", "contentData": data })
        .then(res => {
            console.log('点击撤销支付 res:>> ', res);
            payData.value.splice($index, 1);
        })
}

// 挂账还款
const return_mountPay = (scope) => {
    const { row, $index } = scope;
    console.log('row :>> ', row);
    let data = {
        itemCode: row.itemCode,
    }
    // console.log('会员升级 data :>> ', data);
    Api.Common.PcObjProcess.Do({ "functionName": "MountRefund", "contentData": data })
        .then(res => {
            console.log('点击撤销支付 res:>> ', res);
            payData.value.splice($index, 1);
        })
}

</script>

<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
.container {
    margin-left: 20px;
    width: 540px;
    height: 830px;
    background: #FFFFFF;
    border-radius: 8px;

    .row1 {
        display: flex;
        justify-content: space-between;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #212121;
        padding: 13px 20px;
    }

    .tableRef {
        margin-top: 6px;

        ::v-deep {
            .el-table__cell {
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                border-bottom: 0px;
            }

            .el-table__header {
                .el-table__cell {
                    height: 48px;
                    background-color: #E6E6E6 !important;
                }
            }

            .el-table__inner-wrapper::before {
                height: 0px;
            }

            .el-table__body {
                // -webkit-border-horizontal-spacing: 13px;  // 水平间距
                -webkit-border-vertical-spacing: 20px; // 垂直间距 设置的是行间距
                // margin-top: 20px ;
                // padding: 0 20px;
                // width: 200px!important;
            }

            .el-table__row {
                background: #F9F9F9;
            }
        }

        .del-img {
            width: 27px;
            height: 27px;
            cursor: pointer;
        }

    }

    .surplus-box {
        margin: 20px auto;
        width: 520px;
        height: 100px;
        background: #FFFBE5;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        // align-items: stretch;
        padding: 24px 20px;
    }
}

.table1 {
    height: 320px;
}

.table2 {

    height: 300px;
}

.color-FF3333 {
    color: #FF3333;
}

.color-0ACC6B {
    color: #0ACC6B;
}

.color-212121 {
    color: #212121;
}

.color-FF6A00 {
    color: #FF6A00;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-24 {
    font-size: 24px;
}

.font-weight-bold {
    font-weight: bold;
}

.form-speItem {
    ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px;
    }

    ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 10px;
        height: 10px;
    }

    ::v-deep(.el-radio__label) {
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: bold;
        color: #212121;
        line-height: 16px;
    }

    ::v-deep {
        .el-radio__input.is-checked+.el-radio__label {
            color: #ff6a00 !important;
        }
    }

    ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
    }

}
</style>
